<template>
  <div class="home">
    <div class="home-left">
      <div class="nav">
        <Sidebar :navigationList="navigationItem"></Sidebar>
      </div>
    </div>
    <div class="home-rigth">
      <div class="top">
        <div class="header">
          <div class="header-left">
            <i class="el-icon-time ai-margin-right-sz ai-font-size-lg"></i>
            <span style="margin-left:5px">{{nowDate + week}}</span>
          </div>
          <div class="header-right">
            <span style="margin-right:10px">数字孪生后台管理系统</span>
            <span>
              <i class="el-icon-s-custom"></i>
              欢迎 {{ name }} |</span>
            <span class="outLogin ai-display-ib" @click="outLogin">
              <i class="el-icon-switch-button icon"></i>
              <!--            退出登录-->
            </span>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="content">
          <keep-alive :max="5">
            <router-view></router-view>
          </keep-alive>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Sidebar from "../../components/sidebar.vue";
export default {
  name: "Home",
  components: {
    Sidebar,
  },
  data(){
    return{
      name:'Admin',
      navigationItem: [
        {
          navigationIndex: "/excellent",
          title: "卓越人员",
          icon: "el-icon-user-solid",
        },
        {
          navigationIndex: "/results",
          title: "获得成果",
          icon: "el-icon-s-flag",
        },
      ],
      nowDate:'',
      week:'',
    }
  },
  mounted(){
    // this.name = localStorage.getItem('username');
    let time = new Date();
    this.nowDate = time.toLocaleDateString();
    this.week = "星期" + "日一二三四五六".charAt(new Date().getDay());
  },
  methods:{
    outLogin() {
      this.$router.push("/");
      sessionStorage.removeItem("token");
    },
  }
};
</script>

<style lang="less" scoped>
.home {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  box-sizing: border-box;
  //overflow: hidden;
  position: relative;
  .home-left {
    width: 250px;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    .nav {
      width: 250px;
      height: 100%;
    }
  }
  .home-rigth {
    position: absolute;
    top: 0;
    right: 0;
    left: 250px;
    bottom: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    box-sizing: border-box;

    .header {
      display: flex;
      flex-direction: row;
      height: 50px;
      margin-bottom: 10px;
      width: 100%;
      background-color: #fff;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      line-height: 50px;
      padding: 0 10px;
      .header-left {
        flex: 1;
      }
      .header-right {
        flex: 1;
        text-align: right;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        .outLogin {
          width: 30px;
          height: 30px;
          // margin: 10px 0;
          cursor: pointer;
          .icon{
            font-size: 20px;
          }
        }
      }
    }
    .main{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 10px;
      padding-top: 0px;
      overflow-y: auto;
      //overflow-y: scroll;
      // background-color: goldenrod;
    }
  }
}
</style>
